<template>
	<el-dialog title="历史版本比较" :visible.sync="dialogVisible" width="1600px" @close="handleClose"
		:close-on-click-modal="false" append-to-body>
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>历史版本比较</span>
		</div>


		<el-tabs>
			<el-tab-pane label="基础信息比较">
				<div>
					<el-row type="flex" justify="space-between" class="el-row-two">
						<el-col :span="12" style="margin-right: 2px;">
							<div class="smp-result smp_panel_1">
								<div class="smp_panel_header">
									<div class="smp_panel_pre"></div>
									<div class="smp_panel_title">原始基础信息</div>
								</div>
								<div class="smp_panel_body">
									<el-descriptions size="mini" :column="1" border>
										<el-descriptions-item label="服务系统">
											{{smpServiceList.systemNo|getSystemName}}({{smpServiceList.systemNo}})
										</el-descriptions-item>
										<el-descriptions-item label="交易码">
											<span style="color: crimson;" v-if="baseColor.transCode=='1'">
												{{smpServiceList.transCode}}
											</span>
											<span v-else>{{smpServiceList.transCode}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="交易名称">
											<span style="color: crimson;" v-if="baseColor.transName=='1'">
												{{smpServiceList.transName}}
											</span>
											<span v-else>{{smpServiceList.transName}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="机构号">
											<span style="color: crimson;" v-if="baseColor.systemOrg=='1'">
												{{smpServiceList.systemOrg}}
											</span>
											<span v-else>{{smpServiceList.systemOrg}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="ESB测试地址">
											<span style="color: crimson;" v-if="baseColor.esbAddr=='1'">
												{{smpServiceList.esbAddr}}
											</span>
											<span v-else>{{smpServiceList.esbAddr}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="报文编码">
											<span style="color: crimson;" v-if="baseColor.msgCode=='1'">
												{{smpServiceList.msgCode|dictName('SMP0004')}}
											</span>
											<span v-else>{{smpServiceList.msgCode|dictName('SMP0004')}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="报文协议">
											<span style="color: crimson;" v-if="baseColor.msgAgreement=='1'">
												{{smpServiceList.msgAgreement}}
											</span>
											<span v-else>{{smpServiceList.msgAgreement}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="httpMethed">
											<span style="color: crimson;" v-if="baseColor.httpMethed=='1'">
												{{smpServiceList.httpMethed}}
											</span>
											<span v-else>{{smpServiceList.httpMethed}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="测试URL">
											<span style="color: crimson;" v-if="baseColor.testAddr=='1'">
												{{smpServiceList.testAddr}}
											</span>
											<span v-else>{{smpServiceList.testAddr}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="生产URL">
											<span style="color: crimson;" v-if="baseColor.prodAddr=='1'">
												{{smpServiceList.prodAddr}}
											</span>
											<span v-else>{{smpServiceList.prodAddr}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="服务编码">
											<span style="color: crimson;" v-if="baseColor.busCode=='1'">
												{{smpServiceList.busCode}}
											</span>
											<span v-else>{{smpServiceList.busCode}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="业务路由">
											<span style="color: crimson;" v-if="baseColor.busPath=='1'">
												{{smpServiceList.busPath}}
											</span>
											<span v-else>{{smpServiceList.busPath}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="外部可见">
											<span style="color: crimson;" v-if="baseColor.outShow=='1'">
												{{smpServiceList.outShow|dictName('SMP0015')}}
											</span>
											<span v-else>{{smpServiceList.outShow|dictName('SMP0015')}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="功能简介">
											<span style="color: crimson;" v-if="baseColor.funIntr=='1'">
												{{smpServiceList.funIntr}}
											</span>
											<span v-else>
												{{smpServiceList.funIntr}}
											</span>
										</el-descriptions-item>
										<el-descriptions-item label="外联业务路由">
											<span style="color: crimson;" v-if="baseColor.oesbBusPath=='1'">
												{{smpServiceList.oesbBusPath}}
											</span>
											<span v-else>{{smpServiceList.oesbBusPath}} </span>
										</el-descriptions-item>
									</el-descriptions>


								</div>
							</div>
						</el-col>
						<el-col :span="12" style="margin-right: 3px;">
							<div class="smp-result smp_panel_1">
								<div class="smp_panel_header">
									<div class="smp_panel_pre"></div>
									<div class="smp_panel_title">历史基础信息</div>
								</div>
								<div class="smp_panel_body">
									<el-descriptions size="mini" :column="1" border>
										<el-descriptions-item label="服务系统">
											{{rowList.systemNo|getSystemName}}({{rowList.systemNo}})
										</el-descriptions-item>
										<el-descriptions-item label="交易码">
											<span style="color: crimson;" v-if="baseColor.transCode=='1'">
												{{rowList.transCode}}
											</span>
											<span v-else>{{rowList.transCode}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="交易名称">
											<span style="color: crimson;" v-if="baseColor.transName=='1'">
												{{rowList.transName}}
											</span>
											<span v-else>{{rowList.transName}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="机构号">
											<span style="color: crimson;" v-if="baseColor.systemOrg=='1'">
												{{rowList.systemOrg}}
											</span>
											<span v-else>{{rowList.systemOrg}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="ESB测试地址">
											<span style="color: crimson;" v-if="baseColor.esbAddr=='1'">
												{{rowList.esbAddr}}
											</span>
											<span v-else>{{rowList.esbAddr}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="报文编码">
											<span style="color: crimson;" v-if="baseColor.msgCode=='1'">
												{{rowList.msgCode|dictName('SMP0004')}}
											</span>
											<span v-else>{{rowList.msgCode|dictName('SMP0004')}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="报文协议">
											<span style="color: crimson;" v-if="baseColor.msgAgreement=='1'">
												{{rowList.msgAgreement}}
											</span>
											<span v-else>{{rowList.msgAgreement}} </span>
										</el-descriptions-item>
										
										<el-descriptions-item label="httpMethed">
											<span style="color: crimson;" v-if="baseColor.httpMethed=='1'">
												{{rowList.httpMethed}}
											</span>
											<span v-else>{{rowList.httpMethed}} </span>
										</el-descriptions-item>
										
										<el-descriptions-item label="测试URL">
											<span style="color: crimson;" v-if="baseColor.testAddr=='1'">
												{{rowList.testAddr}}
											</span>
											<span v-else>{{rowList.testAddr}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="生产URL">
											<span style="color: crimson;" v-if="baseColor.prodAddr=='1'">
												{{rowList.prodAddr}}
											</span>
											<span v-else>{{rowList.prodAddr}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="服务编码">
											<span style="color: crimson;" v-if="baseColor.busCode=='1'">
												{{rowList.busCode}}
											</span>
											<span v-else>{{rowList.busCode}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="业务路由">
											<span style="color: crimson;" v-if="baseColor.busPath=='1'">
												{{rowList.busPath}}
											</span>
											<span v-else>{{rowList.busPath}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="外部可见">
											<span style="color: crimson;" v-if="baseColor.outShow=='1'">
												{{rowList.outShow|dictName('SMP0015')}}
											</span>
											<span v-else>{{rowList.outShow|dictName('SMP0015')}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="功能简介">
											<span style="color: crimson;" v-if="baseColor.funIntr=='1'">
												{{rowList.funIntr}}
											</span>
											<span v-else>
												{{rowList.funIntr}}
											</span>
										</el-descriptions-item>
										<el-descriptions-item label="外联业务路由">
											<span style="color: crimson;" v-if="baseColor.oesbBusPath=='1'">
												{{rowList.oesbBusPath}}
											</span>
											<span v-else>{{rowList.oesbBusPath}} </span>
										</el-descriptions-item>
									</el-descriptions>

									</el-descriptions>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>


			<el-tab-pane label="字段比较">

				<div style="height: 30px;">
					<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
						<el-form-item label="隐藏相同字段:">
							<!-- 	<el-checkbox v-model="checkflg" @change="flgChange">隐藏相同字段</el-checkbox>
							 -->
							<el-switch @change="flgChange" size="mini" active-text="是" inactive-text="否"
								v-model="checkflg" :width="60"></el-switch>
						</el-form-item>
					</el-form>
				</div>
				<div>
					<el-row type="flex" justify="space-between" class="el-row-two">
						<el-col :span="12" style="margin-right: 2px;">
							<div>
								<div class=" smp_panel_1" style="margin-left: 3px;">
									<div class="smp_panel_header">
										<div class="smp_panel_pre"></div>
										<div class="smp_panel_title">原始字段</div>
									</div>
									<div class=" smp_panel_body">


										<!-- <el-table class="fieldList" :data="smpFieldList.slice((smpFieldCurrentPage-1)*smpFieldPageSize,smpFieldCurrentPage*smpFieldPageSize)"  size="mini"  stripe  style="width: 100%" v-if="list1show"> -->
										<el-table class="fieldList"
											:data="smpFieldList.slice((smpFieldCurrentPage-1)*smpFieldPageSize,smpFieldCurrentPage*smpFieldPageSize)"
											:row-class-name="tableStatusClass" size="mini" height="400px"
											style="width: 100%">
											<el-table-column prop="versionType" fixed label="比较结果" align="center"
												width="70">
												<template slot-scope="scope">
													<el-tag type="warning" size="mini"
														v-if="scope.row.versionType=='02'">
														{{scope.row.versionType|dictName("SMP0034")}}</el-tag>

													<el-tag type="danger" size="mini"
														v-else-if="scope.row.versionType=='04'">
														{{scope.row.versionType|dictName("SMP0034")}}
													</el-tag>

													<el-tag type="info" size="mini" v-else>
														{{scope.row.versionType|dictName("SMP0034")}}</el-tag>

												</template>
											</el-table-column>
											<el-table-column prop="orderNumber" label="序号" align="center" width="45">
											</el-table-column>
											<el-table-column prop="fieldCode" show-overflow-tooltip label="字段代码"
												align="center" width="100"></el-table-column>
											<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip
												align="center"></el-table-column>
											<el-table-column prop="parentType" label="父节点" align="center" width="60">
											</el-table-column>

											<el-table-column prop="nodeType" label="节点类型" align="center" width="85">
												<template slot-scope="scope">
													{{scope.row.nodeType|dictName("SMP0017")}}
												</template>
											</el-table-column>

											<el-table-column prop="fieldType" label="字段类型" align="center" width="70">
												<template slot-scope="scope">
													{{scope.row.fieldType|dictName("SMP0018")}}
												</template>
											</el-table-column>

											<el-table-column prop="fieldLength" label="长度" align="center" width="60">
											</el-table-column>
											<el-table-column prop="fieldRequire" align="center" label="是否必输" width="70">
												<template slot-scope="scope">
													{{scope.row.fieldRequire|dictName("SMP0015")}}
												</template>

											</el-table-column>

											<el-table-column prop="struct" label="报文结构" align="center" width="70">
												<template slot-scope="scope">
													{{scope.row.struct|dictName("SMP0019")}}
												</template>
											</el-table-column>

											<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述">
											</el-table-column>

											<el-table-column prop="inOut" label="输入输出" align="center" width="70">
												<template slot-scope="scope">
													{{scope.row.inOut|dictName("SMP0020")}}
												</template>
											</el-table-column>


										</el-table>
										<div class="smp-pagination">
											<el-pagination background size="medium"
												layout="total,sizes,prev, pager, next,jumper"
												:page-size="smpFieldPageSize" :page-sizes="[5,10,20]"
												:total="smpFieldList.length" :current-page="smpFieldCurrentPage"
												@current-change="smpFieldCurrentChange"
												@size-change="smpFieldSizeChange">
											</el-pagination>
										</div>
									</div>
								</div>
							</div>
						</el-col>

						<el-col :span="12" style="margin-left: 3px;">
							<div>
								<div class=" smp_panel_1">
									<div class="smp_panel_header">
										<div class="smp_panel_pre"></div>
										<div class="smp_panel_title">历史字段</div>
									</div>
									<div class=" smp_panel_body">
										<!-- <el-table class="fieldList" :data="applyFieldList.slice((applyFieldCurrentPage-1)*applyFieldPageSize,applyFieldCurrentPage*applyFieldPageSize)"  size="mini"   stripe  style="width: 100%" v-if="list1show"> -->
										<el-table class="fieldList"
											:data="applyFieldList.slice((applyFieldCurrentPage-1)*applyFieldPageSize,applyFieldCurrentPage*applyFieldPageSize)"
											size="mini" height="400px" style="width: 100%"
											:row-class-name="tableStatusClass">

											<el-table-column prop="versionType" fixed label="比较结果" align="center"
												width="70">
												<template slot-scope="scope">
													<el-tag type="warning" size="mini"
														v-if="scope.row.versionType=='02'">
														{{scope.row.versionType|dictName("SMP0034")}}</el-tag>

													<el-tag type="success" size="mini"
														v-else-if="scope.row.versionType=='03'">
														{{scope.row.versionType|dictName("SMP0034")}}
													</el-tag>

													<el-tag type="info" size="mini" v-else>
														{{scope.row.versionType|dictName("SMP0034")}}</el-tag>

												</template>
											</el-table-column>

											<el-table-column prop="orderNumber" label="序号" align="center" width="45">
											</el-table-column>
											<el-table-column prop="fieldCode" label="字段代码" show-overflow-tooltip
												align="center" width="100"></el-table-column>
											<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip
												align="center"></el-table-column>
											<el-table-column prop="parentType" label="父节点" align="center" width="60">
											</el-table-column>

											<el-table-column prop="nodeType" label="节点类型" align="center" width="85">
												<template slot-scope="scope">
													{{scope.row.nodeType|dictName("SMP0017")}}
												</template>
											</el-table-column>

											<el-table-column prop="fieldType" label="字段类型" align="center" width="70">
												<template slot-scope="scope">
													{{scope.row.fieldType|dictName("SMP0018")}}
												</template>
											</el-table-column>

											<el-table-column prop="fieldLength" label="长度" align="center" width="60">
											</el-table-column>
											<el-table-column prop="fieldRequire" align="center" label="是否必输" width="70">
												<template slot-scope="scope">
													{{scope.row.fieldRequire|dictName("SMP0015")}}
												</template>

											</el-table-column>

											<el-table-column prop="struct" label="报文结构" align="center" width="70">
												<template slot-scope="scope">
													{{scope.row.struct|dictName("SMP0019")}}
												</template>
											</el-table-column>

											<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述">
											</el-table-column>

											<el-table-column prop="inOut" label="输入输出" align="center" width="70">
												<template slot-scope="scope">
													{{scope.row.inOut|dictName("SMP0020")}}
												</template>
											</el-table-column>


										</el-table>
										<div class="smp-pagination">
											<el-pagination background size="medium"
												layout="total,sizes,prev, pager, next,jumper"
												:page-size="applyFieldPageSize" :page-sizes="[5,10,20]"
												:total="applyFieldList.length" :current-page="applyFieldCurrentPage"
												@current-change="applyFieldCurrentChange"
												@size-change="applyFieldSizeChange">
											</el-pagination>
										</div>
									</div>
								</div>
							</div>
						</el-col>

					</el-row>
				</div>

			</el-tab-pane>


		</el-tabs>
	</el-dialog>
</template>

<script>
	"use strict";
	import {
		getFieldByServer,
		getFieldBySmpAndHis
	} from '@/api/field.js';
	import {
		getBaseBySmpAndHis
	} from '@/api/demand.js';

	export default {
		data() {
			return {
				that: this,
				index: 0,
				type: 'add',
				dialogVisible: false,
				list1show: true,
				requireTypeDisable: false,
				transCodeDisabled: false,
				checkflg: true,

				rowList: [],
				smpServiceList: [],
				baseColor: [],

				applyFieldList0: [],
				applyFieldList: [],
				smpFieldList0: [],
				smpFieldList: [],
				//请求字段分页信息
				applyFieldCurrentPage: 1,
				applyFieldPageSize: 10,
				smpFieldCurrentPage: 1,
				smpFieldPageSize: 10,
				showList: true,

				form: {
					applyId: '',
					requireType: '01',
					transName: '',
					transCode: '',
					systemNo: '',
					systemOrg: '',
					msgAgreement: '',
					msgCode: '',
					testAddr: '',
					prodAddr: '',
					esbAddr: '',
					outShow: '01',
					funIntr: '',
					remark: '',
					applyFieldList: [],
				},

			};
		},
		components: {

		},
		created() {},

		filters: {},

		methods: {

			smpFieldCurrentChange(val) {

				this.smpFieldCurrentPage = val
			},
			smpFieldSizeChange(val) {
				this.smpFieldCurrentPage = 1
				this.smpFieldPageSize = val
			},


			applyFieldCurrentChange(val) {

				this.applyFieldCurrentPage = val
			},
			applyFieldSizeChange(val) {
				this.applyFieldCurrentPage = 1
				this.applyFieldPageSize = val
			},



			flgChange(checkflg) {

				if (checkflg) {
					this.applyFieldList = this.applyFieldList0.filter((item) => item.versionType != '01');
					this.smpFieldList = this.smpFieldList0.filter((item) => item.versionType != '01');
				} else {
					this.applyFieldList = this.applyFieldList0;
					this.smpFieldList = this.smpFieldList0;

				}
			},
			/* SMP0034	对比结果	02	修改	01
			SMP0034	对比结果	03	新增	01
			SMP0034	对比结果	04	删除	01 */
			tableStatusClass({
				row,
				index
			}) {
				if (row.versionType === '02') {
					return 'table-warning';
				} else if (row.versionType === '03') {
					return 'table-info';
				} else if (row.versionType === '04') {
					return 'table-error';
				} else if (index % 2 == 0) {
					return 'table-strip';
				} else {
					return ''
				}


			},

			showDialog2(row) {
				this.type = 'update';
				this.form = row;

				this.addServerView(row);
				this.getByApplyId(row);

				this.dialogVisible = true;
				this.requireTypeDisable = true;
				this.transCodeDisabled = true;
			},

			closeDialog() {
				this.$refs["form"].resetFields();
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			},

			addServerView(row) {
				Object.assign(this.form, row);

				getFieldBySmpAndHis({
					"id": row.id
				}).then(response => {
					this.applyFieldList0 = response.data.extend.fieldHisList;

					this.smpFieldList0 = response.data.extend.smpFieldList;

					if (this.checkflg) {
						this.applyFieldList = this.applyFieldList0.filter((item) => item.versionType != '01');
						this.smpFieldList = this.smpFieldList0.filter((item) => item.versionType != '01');
					} else {
						this.applyFieldList = this.applyFieldList0;
						this.smpFieldList = this.smpFieldList0;
					}


				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});


			},

			getByApplyId(row) {
				getBaseBySmpAndHis({
					"id": row.id
				}).then(response => {
					this.rowList = response.data.extend.smpServiceHis;
					this.smpServiceList = response.data.extend.smpService;
					this.baseColor = response.data.extend.baseColor;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},



		},

	}
</script>

<style>
	.el-table .table-warning {
		background-color: #feffdd;
	}

	.el-table .table-info {
		background-color: #caffd0;
	}

	.el-table .table-error {
		background-color: #ffdce6;
	}

	.el-table .table-strip {
		background-color: #d4d4d4;
	}


	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 15px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}

	.fieldList {
		min-height: 100px;
		max-height: 400px;
		overflow: auto;
	}
</style>
